<div id="LAY_app_body" class="layui-body">
    <div class="layadmin-tabsbody-item layui-show">
        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-header layuiadmin-card-header-auto">
                    <!--            <fieldset class="layui-elem-field layui-field-title">-->
                    <!--                <legend>权限列表</legend>-->
                    <!--            </fieldset>-->
                    <!--            <blockquote class="layui-elem-quote">-->
                    <a href="{:url('addMenu')}" class="layui-btn layui-btn-sm ">添加菜单</a>
                    <a class="layui-btn layui-btn-normal layui-btn-sm" onclick="openAll();">展开或折叠全部</a>
                    <!--            </blockquote>-->

                </div>
                <div class="layui-card-body">
                    <table class="layui-table" id="treeGrid" lay-filter="treeGrid"></table>
                </div>

            </div>
        </div>
    </div>
</div>


<!--<script type="text/html" id="status">-->
<!--    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="status" {{ d.status == 0 ? 'checked' : '' }}>-->
<!--</script>-->
<script type="text/html" id="order">
    <input name="{{d.id}}" data-id="{{d.id}}" class="list_order layui-input" value=" {{d.orderlist}}" size="10"/>
</script>
<script type="text/html" id="icon">
    <span class="icon {{d.icon}}"></span>
</script>
<script type="text/html" id="action">
    <a href="{:url('editMenu')}?id={{d.id}}" class="layui-btn layui-btn-xs">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    var editObj = null, ptable = null, treeGrid = null, tableId = 'treeGrid', layer = null;
    layui.config({
        base: '/static/plugs/layui/extend/'
    }).extend({
        treeGrid: 'treeGrid/treeGrid'
    }).use(['jquery', 'treeGrid', 'layer', 'form'], function () {
        var $ = layui.jquery, form = layui.form;
        treeGrid = layui.treeGrid;
        layer = layui.layer;
        ptable = treeGrid.render({
            id: tableId
            , elem: '#' + tableId
            , idField: 'id'
            , url: '{:url("menu")}'
            , cellMinWidth: 100
            , treeId: 'id'//树形id字段名称
            , treeUpId: 'pid'//树形父id字段名称
            , treeShowName: 'title'//以树形式显示的字段
            , height: 'full-140'
            , isFilter: false
            , iconOpen: true//是否显示图标【默认显示】
            , isOpenDefault: true//节点默认是展开还是折叠【默认展开】
            , cols: [[
                {field: 'id', title: 'id', width: 70, fixed: true},
                // {field: 'icon', align: 'center',title: '{:lang("icon")}', width: 60,templet: '#icon'},
                {field: 'title', title: '权限名称', width: 200},
                {field: 'name', title: '控制器/方法', width: 200},
                // {field: 'auth_open',align: 'center', title: '是否验证权限', width: 150,toolbar: '#auth'},
                // {field: 'status',align: 'center',title: '菜单是否删除', width: 150,toolbar: '#status'},
                {field: 'orderlist', align: 'center', title: '排序', width: 80, templet: '#order'},
                {title: '操作', width: 200, toolbar: '#action', align: "center"},
            ]]
            , page: false
        });
        treeGrid.on('tool(' + tableId + ')', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('你确定要删除他吗', function (index) {
                    var loading = layer.load(1, {shade: [0.1, '#fff']});
                    $.post("{:url('delMenu')}", {id: data.id}, function (res) {
                        layer.close(loading);
                        if (res.code == 0) {
                            obj.del();
                            layer.msg(res.message, {time: 1000, icon: 1});
                        } else {
                            layer.msg(res.message, {time: 1000, icon: 2});
                        }
                    });
                    layer.close(index);
                });
            }
        });
        // loading =layer.load(1, {shade: [0.1,'#fff']});
        // layer.close(loading);
    });

    function openAll() {
        var treedata = treeGrid.getDataTreeList(tableId);
        treeGrid.treeOpenAll(tableId, !treedata[0][treeGrid.config.cols.isOpen]);
    }

</script>